<template>
	<view class="page_team_setUp">
		
		<view class="title">团队名称<text class="must red">*</text></view>
		<view class="item">
			<input type="text" placeholder="请输入团队名称"  v-model="teamInfo.teamName"/>
		</view>
		
		<view class="title">简介<text class="must red">*</text></view>
		<view class="item">
			<input type="text" placeholder="请输入团队简介" v-model="teamInfo.brief"/>
		</view>
		
		<view class="title">选择地址<text class="must red">*</text></view>
		<view class="item">
			<input type="text" placeholder="请选择地址"  @focus="chooseAddress" v-model="teamInfo.addressName"/>
		</view>
		
		<view class="title">详细地址<text class="must red">*</text></view>
		<view class="item">
			<input type="text" placeholder="请输入详细地址" v-model="teamInfo.address"/>
		</view>
		
		<view class="title">公告</view>
		<view class="item item_text">
			<textarea type="text" placeholder="填写公告" v-model="teamInfo.notice" />
		</view>
		
		<wyb-button class="btn" :ripple="true" type="plain" color="#585cf7"
		:radius="radius" width="100%" height="80rpx" font-size="32rpx" @click="establishTeam"
			>组建团队</wyb-button> 
	</view>
</template>

<script>
	import graceChecker from '@/common/graceChecker.js'
	import formRuleConfig from '@/config/formRule.config.js'
	import { mapState, mapMutations } from "vuex";
	export default {
		computed: {
			...mapState(["userInfo"]),
		},
		data() {
			return {
				radius:["100rpx"],
				teamInfo: {
					teamName: "",
					brief: "",
					lo: "",
					la: "",
					address: "",
					notice:"",
					addressName: ""
				}
			}
		},
		methods: {
			//选择地址
			chooseAddress() {
				let that = this;
				uni.chooseLocation({
				    success: function (res) {
						console.log(res);
				        // console.log('位置名称：' + res.name);
				        // console.log('详细地址：' + res.address);
				        // console.log('纬度：' + res.latitude);
				        // console.log('经度：' + res.longitude);
						that.teamInfo.addressName = res.address || res.name;
						that.teamInfo.address = res.address || res.name;
						that.teamInfo.la = res.latitude;
						that.teamInfo.lo = res.longitude;
					}
				});
			},
			//创建团队
			establishTeam() {
				let that = this;
				let parmas = JSON.parse(JSON.stringify(this.teamInfo));
				//验证格式
				// let checkRes = graceChecker.check(parmas, formRuleConfig.creatTeamRule);
				// if (!checkRes) {
				// 	uni.showToast({
				// 		title: graceChecker.error,
				// 		icon: "none"
				// 	});
				// 	return;
				// }
				parmas.address = parmas.addressName;
				that.craetTeam(parmas);
			},
			craetTeam(obj) {
				let that = this;
				this.$api.createTeam(obj).then(res=> {
					let newData = that.userInfo;
					newData.teamPartnerStatus = 1;
					this.$store.commit("SET_USERINFO", newData);
					uni.switchTab({
						url:"/pages/team/team"
					})
				}).catch(()=> {})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.page_team_setUp{width: 750rpx; margin:0 auto; padding: 20rpx 30rpx 0;}
	.title{font-size: 28rpx;font-weight: 500;color: #333333;line-height: 46rpx;}
	.item{border-bottom: 1px solid #EEEEEE;height: 80rpx;}
	.item input  {width: 100%; font-size: 26rpx; height: 80rpx;}
	.item_text{height: 200rpx;}
	.item_text textarea{width: 100%; height:100%;font-size: 26rpx;line-height: 36rpx;}
	.btn{margin-top: 40rpx;}
</style>
